<template>
  <el-form label-width="auto" style="margin: 10px" :model="form">
    <el-form-item label="物料名称">
      <el-input size="small" v-model="form.materialName" />
    </el-form-item>
    <el-form-item label="所属分类">
      <el-select v-model="value" placeholder="请选择物料所属分类" size="small">
        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
        <template #footer>
          <el-button v-if="!isAdding" text bg size="small" @click="onAddOption"> 新增 </el-button>
          <el-button v-if="!isAdding" text bg size="small" @click="onRefresh"> 刷新 </el-button>
          <template v-else>
            <el-input v-model="optionName" class="option-input" placeholder="input option name" size="small"></el-input>
            <el-button type="primary" size="small" @click="onConfirm"> 确认 </el-button>
            <el-button size="small" @click="clear">取消</el-button>
          </template>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="创建人">
      <el-text class="mx-1" size="large">林青煌</el-text>
    </el-form-item>
    <el-form-item label="已发布版本">
      <el-tooltip class="box-item" effect="dark" content="点击查看已发布版本记录" placement="top">
        <el-tag type="danger" @click="onShowVersionList" style="cursor: pointer"> 未发布 </el-tag>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="物料说明">
      <el-input style="width: 240px" :rows="2" type="textarea" placeholder="Please input" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
export default {
  name: 'MaterialDetailTab',
};
</script>
<script setup lang="ts">
import { ref } from 'vue';
import type { CheckboxValueType } from 'element-plus';

const form = ref<{ materialName: string }>({
  materialName: '111',
});
const isAdding = ref(false);
const value = ref<CheckboxValueType[]>([]);
const optionName = ref('');
const cities = ref([
  {
    value: 'Beijing',
    label: 'Beijing',
  },
]);

const onAddOption = () => {
  isAdding.value = true;
};
const onRefresh = () => {
  cities.value = [
    {
      value: 'Guangzhou',
      label: 'Guangzhou',
    },
  ];
};
const onConfirm = () => {
  if (optionName.value) {
    cities.value.push({
      label: optionName.value,
      value: optionName.value,
    });
    clear();
  }
};
const clear = () => {
  optionName.value = '';
  isAdding.value = false;
};
const onShowVersionList = () => {};
const getDetailData = () => {
  return form.value;
};

defineExpose({
  getDetailData,
});
</script>
